<template>
	<view>
		<view class="header-box">
			<u--image :showLoading="false" src="../../static/images/common/logo.png" width="100" height="20"></u--image>
			<view class="d-flex gap-2">
				<!-- <view class="connect-wallet-lang-buttons" @click="clears()">
					<view
						class="connect-wallet-buttons btn-primary"><svg xmlns="http://www.w3.org/2000/svg"
							xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img"
							class="iconify iconify--ooui" width="12" height="12" viewBox="0 0 20 20"
							style="color: rgb(245, 208, 173);">
							<path fill="currentColor"
								d="M15.65 4.35A8 8 0 1 0 17.4 13h-2.22a6 6 0 1 1-1-7.22L11 9h7V2z"></path>
						</svg></view>
				</view> -->
				<view class="connect-wallet-lang-button">
					<view class="connect-wallet-button" v-if="isLogins" @click="logOut()">{{getName}}</view>
					<view class="connect-wallet-button" @click="connectWallet()" v-else>{{getName}}</view>
					<view class="separator">|</view>
					<view class="dropdown-language" @click="langPop()">
						<view class="">{{language}}</view>
						<u--image :showLoading="false" src="../../static/images/common/lang-dropdown.webp" width="4"
							height="4" style="margin-top: 16rpx;margin-left: 10rpx;"></u--image>
					</view>

				</view>
			</view>
		</view>
		<u-popup :show="show" mode="right" @close="close" @open="open" bgColor="#1a2038">
			<view class="lang_container">
				<u-icon name="close" color="#fffff" size="16" @click="close"
					style="position: absolute;right:30rpx;top:50rpx"></u-icon>
				<view class="lang_list">
					<view class="lang_list_menu" v-for="(item,index) in languageList" :key="index"
						@click="selectLanguage(index)" :class="index==select?'selet_lang':''">
						<image :src="item.url" class="lang_img">
							<view class="lang_name"><text>{{item.name}}</text></view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" :isShow='isShow'></u-toast>
		<u-popup :show="regOpen" mode="bottom" @close="closeDialog" @open="open" bgColor="#1a2038">
			<view class="login_box">
				<view>
					<u--text text="Sign in" color="#f1c594"></u--text>
					<view style="margin-top: 14rpx;margin-bottom: 46rpx;">
						<u--text :text="login_invitation_code" color="#556185" size="12"></u--text>
					</view>
					<u-icon name="close" color="#fff" size="20" @click="closeDialog"
						style="right:30rpx;top:30rpx;position: absolute;"></u-icon>


				</view>
				<view>
					<view style="margin-bottom: 16rpx;">
						<u--text :text="Invitation_Code" align="center" color="#f1c594" size="14"></u--text>
					</view>
					<view class="main-app modal-body">
						<view class="form-group register">
							<view class=" undefined input-group">
								<u--input :placeholder="use_code_link" border="none" v-model="shareCode" color="#fff"
									inputAlign="center" fontSize="14" class=""
									style="background:#556185;border-radius: 15px;;padding: 10rpx 20rpx;height: 70rpx;margin-bottom: 40rpx;"></u--input>
							</view>
						</view>
					</view>
				</view>
				<view>
					<view style="margin-bottom: 16rpx;">
						<u--text :text="Email_address_pwd" align="center" color="#f1c594" size="14"></u--text>
					</view>
					<u--input :placeholder="enter_email_address" border="none" v-model="email" color="#fff"
						inputAlign="center" fontSize="14"
						style="background:#556185;border-radius:40rpx;padding: 10rpx 20rpx;height: 70rpx;margin-bottom: 40rpx;"></u--input>
				</view>
				<view>
					<view style="margin-bottom: 16rpx;">
						<u--text :text="Transaction_code" align="center" color="#f1c594" style="margin-bottom: 16rpx;"
							size="14"></u--text>
					</view>
					<u--input :placeholder="input_your_password" border="none" v-model="paypassword" color="#fff"
						inputAlign="center" fontSize="14"
						style="background:#556185;border-radius:40rpx;padding: 10rpx 20rpx;height: 70rpx;margin-bottom: 40rpx;"></u--input>
				</view>
				<view>
					<view style="margin-bottom: 16rpx;">
						<u--text :text="Determine_trading_password" align="center" color="#f1c594"
							style="margin-bottom: 16rpx;" size="14"></u--text>
					</view>

					<u--input :placeholder="enter_confirm_trading_pwd" border="none" v-model="comPaypassword"
						color="#fff" inputAlign="center" fontSize="14"
						style="background:#556185;border-radius:40rpx;padding: 10rpx 20rpx;height: 70rpx;margin-bottom: 40rpx;"></u--input>
				</view>

				<u-button :text="Sign_in" class="btn-common" style="margin-bottom: 40rpx;" :loading="isLoading"
					:loadingText="loading" @click="buttonReg()"></u-button>
			</view>
		</u-popup>
		<u-popup :show="showLoginOut" mode="center" @close="closeDialog" :closeOnClickOverlay="true">
			<view>
				<view role="dialog" aria-modal="true" class="fade connect-wallet-modal modal show" tabindex="-1"
					style="display: block;">
					<view class="modal-dialog modal-dialog-centered">
						<view class="modal-content">
							<view>
								<view class="modal-header">
									<view class="modal-title h4">{{$t('Connecting')}}
									</view>
									<button type="button" class="btn-close" aria-label="Close"
										@click="closeDialog"></button>
								</view>
								<view class="modal-body">
									<view class="connect-wallet-text-section p-2"><label class="connect-wallet-detail"
											style="font-size: 30rpx;">{{$t('happy_day')}}</label></view>
								</view>
								<view class="modal-footer" style="color: #333333;"><button
										class="button-connectors disconnect" style="background-color: #F7D2B2;"
										@click="clearStorage">{{$t('Log_out')}}</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>

	</view>


</template>

<script>
	import yui from '@/common/httpRequest';
	export default {
		name: 'topWallet',
		props: {
			//是否固定
			isLogins: {
				type: Boolean,
				default: false
			},
			getName: {
				type: String,
				default: ''
			},

		},
		mounted() {
			/* 获取钱包余额 */
			this.select = uni.getStorageSync('langname') ? uni.getStorageSync('langname') : 0
			if (this.select == 0) {
				this.language = '简体'
			} else {
				this.language = 'EN'
			}
			if (uni.getStorageSync("yyui_token")) {
				this.islogin = true;
				this.names = this.tui.hidden(uni.getStorageSync("yy_wallet").address, 3, 4)
			} else {
				this.islogin = false;
			}
			this.shareCode = uni.getStorageSync("yyui_sharecode")
		},
		data() {
			return {
				loading: this.$t('Be_registered'),
				isLoading: false,
				language: '简体',
				showLoginOut: false,
				amount: '0.00',
				address: '',
				isShow: false,
				names: this.$t('login'),
				islogin: false,
				showLanguage: false,
				isopen: false,
				show: false,
				select: 0,
				email: '',
				languageList: [{
						name: '简体中文',
						url: "/static/images/entryscreen/china.svg"
					},
					{
						name: 'English',
						url: "/static/images/entryscreen/usa.svg"
					},
				],
				paypassword: '',
				comPaypassword: '',
				indexs: 0,
				select_btn: true,

				regOpen: false,
				types: 1,

				current: 0,
				shareCode: '',
				params: {
					duration: 100000000,
					type: 'loading',
					title: this.$t('Loading-wallet'),
					message: this.$t('Loading-wallet-now'),
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/loading.png'
				},
				login_invitation_code: this.$t('login_invitation_code'),
				Invitation_Code: this.$t('Invitation_Code'),
				use_code_link: this.$t('use_code_link'),
				Email_address_pwd: this.$t('Email_address_pwd'),
				enter_email_address: this.$t('enter_email_address'),
				Transaction_code: this.$t('Transaction_code'),
				input_your_password: this.$t('input_your_password'),
				Determine_trading_password: this.$t('Determine_trading_password'),
				enter_confirm_trading_pwd: this.$t('enter_confirm_trading_pwd'),
				Sign_in: this.$t('Sign_in')
			};
		},
		methods: {
			//清除缓存（退出登录）
			clearStorage() {
				let that = this;
				this.showLoginOut = false
				this.isLogins = false;
				this.getName = this.$t('login');

				this.tui.logout();
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			clears(){
				uni.setStorageSync("yy_wallet",'')
				this.tui.toast(this.$t('clears'));
				return
			},
			closeDialog() {
				this.showLoginOut = false
				this.regOpen = false;
			},
			/* 钱包链接 */
			async connectWallet() {
				this.address = uni.getStorageSync("yy_wallet").address
				if (!this.address) {
					this.$refs.uToast.show({
						...this.params,
					})
				}
				let result = this.web3Rpc.handleWalletConnect();
				await Promise.resolve(result).then((value) => {
					if (value) {
						this.$refs.uToast.hide();
						this.address = uni.getStorageSync("yy_wallet").address
						let datas = {
							authorization_code: this.address,
						}
						let nodeData = this.tui.request('/api/login/autoLogin', 'post', datas, 1000, 1, '',
							'autoLogin');
						Promise.resolve(nodeData).then((values) => {
							if (values.code == 200) {
								this.regOpen = false
								yui.setToken(values.data.token)
								this.isLogins = true;
								this.getName = this.tui.hidden(uni.getStorageSync("yy_wallet").address,
									3, 4)
							} else {
								this.getName = this.tui.hidden(uni.getStorageSync("yy_wallet").address,
									3, 4)
								this.regOpen = true
							}
						})
					} else {
						this.tui.toast(this.$t('No-web3-wallet-found'));
						return
					}
				})
			},
			langPop() {
				this.show = true
			},
			logOut() {
				this.showLoginOut = true
			},
			close() {
				this.show = false
			},
			closeOpen() {
				this.isopen = false
				this.open_reg = false
			},
			async getWallet() {
				try {
					let balance = await this.web3Rpc.getErc20Balance('RHD')
					this.amount = Math.round(parseFloat(balance) * 100) / 100;

				} catch (e) {
					//TODO handle the exception
				}
			},
			openWallet() {
				this.$emit('onOpen');
			},
			buttonReg() {
				if (this.paypassword != this.comPaypassword) {
					this.tui.toast(this.$t('password_is_inconsistent'));
					return
				}
				this.address = uni.getStorageSync("yy_wallet").address
				let datas = {
					paypassword: this.paypassword,
					codes: this.shareCode,
					authorization_code: this.address,
					email: this.email
				}
				this.isLoading = true
				let nodeData = this.tui.request('/api/login/authAddress', 'post', datas, 1000, 1, '', 'authAddress');
				Promise.resolve(nodeData).then((value) => {
					if (value.code == 200) {
						yui.setToken(value.data.token)
						setTimeout(() => {
							location.reload();
							this.isLoading = false
						}, 1000)
					} else {
						this.isLoading = false
						// this.isfalse=true
						this.tui.toast(value.message);
					}
				})
			},
			selectLanguage(index) {

				switch (index) {
					case 0:
						uni.setLocale('zh-Hans');
						this.$i18n.locale = 'zh-Hans';
						break;
					case 1:
						uni.setLocale('en');
						this.$i18n.locale = 'en';
						break;
					case 2:
						uni.setLocale('zh-Hant');
						this.$i18n.locale = 'zh-Hant';

						break;

				}
				this.select = index
				this.showLanguage = !this.showLanguage;

				uni.setStorageSync("langname", index);

				location.reload();
			},

			setLanguage(index) {
				// this.select = 1

				this.showLanguage = !this.showLanguage;
				// this.show = false
			},
		}
	};
</script>

<style scoped lang="scss">
	@import '../../static/css/defalut.css';

	.header-box {
		display: flex;
		justify-content: space-between;
	}

	.login_box {
		padding: 30rpx;
	}

	.btn-close-icon {

		position: absolute;
		right: 0;
		top: 0rpx;
		background: #fff;
		border-radius: 50%;
	}

	.separator {
		margin: 0 10rpx 0 0
	}
     .connect-wallet-lang-buttons{
		     // height: 30px;
		     border-radius: 30px;
		     background: #556185;
		     // padding: 0px 11px;
		     width:60rpx;
		     background-size: cover;
		     display: flex !important;
		     justify-content: space-around;
		     align-items: center;
		     box-shadow: 0px -1px 1px rgba(255, 255, 255, 0.5);
	 }
	 .connect-wallet-buttons {
	     color: #f1c594;
	     font-size: 14px !important;
	     font-weight: 700;

	 }
	.lang_container {
		width: 300rpx;
		padding: 20rpx;

		.lang_list {
			margin-top: 100rpx;

			.lang_close {}

			.lang_list_menu {
				display: flex;
				justify-content: left;
				margin-top: 10rpx;

				font-size: 26rpx;
				height: 50rpx;
				padding: 10rpx 10rpx;
				height: 60rpx;

				.lang_img {
					height: 40rpx;
					width: 40rpx;
				}

				.lang_name {
					margin-left: 14rpx;
				}

			}

			.selet_lang {

				background: #424b66;
				padding: 10rpx 10rpx;
				// padding:10rpx;
				border-radius: 40rpx;
			}

		}

	}

	.connect-wallet-modal .modal-content {
		background-color: var(--primary-background) !important;
		margin: 1em !important;
		border-radius: 15px
	}

	// .form-control {
	// 	display: block;
	// 	width: 100%;
	// 	padding: .375rem .75rem;
	// 	font-size: 30rpx;
	// 	font-weight: 400;
	// 	line-height: 1.5;
	// 	height: 60rpx;
	// 	color: var(--bs-body-color);
	// 	-webkit-appearance: none;
	// 	-moz-appearance: none;
	// 	appearance: none;
	// 	background-color: var(--bs-body-bg);
	// 	background-clip: padding-box;
	// 	border: var(--bs-border-width) solid var(--bs-border-color);
	// 	border-radius: var(--bs-border-radius);
	// 	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
	// }
</style>